<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="width:100%;height:700px;float:left; padding:10px 0;">
    <div id="myChart" style="width:80%;height:100%;margin:0 auto;"></div>
  </div>
</template>

<script>
export default {
  name: "Echarts",
  mounted() {
    let echarts = require("echarts");
    let myChart = echarts.init(document.getElementById("myChart"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: '近七天订单量统计图（食堂订单总和）',
        subtext: 'Statistics of orders in the past seven days'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '订单量',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }
      ]
    });
  },
};
</script>
